<template>
  <el-table :data="volteList" stripe style="width: 100%">
    <el-table-column prop="volunteer.vtitle" width="120px" label="标题" #default="scope">
      <el-link @click="toDetail(scope.row.vid)">{{ scope.row.vtitle }}</el-link>
    </el-table-column>
    <el-table-column prop="volunteer.vsubhead" label="副标题"/>
    <el-table-column prop="volunteer.createdate" label="报名时间" width="170px"/>
    <el-table-column prop="vpstatus" label="状态" #default="scope">
      {{
        scope.row.vpstatus === 1 ? '已报名' : scope.row.vpstatus === 2 ? '已结束' : scope.row.vpstatus === 3 ? '未参加' : '其他'
      }}
    </el-table-column>
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button @click="cancel(scope.row.vpid)" v-if="scope.row.volunteer.vstatus===1" type="primary" size="small"
                   round>取消报名
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  分页-->
  <div class="pageBox">
    <el-pagination
        :page-size="5"
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        v-model:current-page="nowPage"
        @update:current-page="getData"
    />
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "JoinVolunte",
  data() {
    return {
      volteList: [],
      nowPage: 1,
      total: 0,
    }
  },
  methods: {
    getData() {
      doThis.doGet("/VoluPeo/getByUser", {pageNum: this.nowPage}).then(res => {
        console.log(res.data)
        this.volteList = res.data.list
        this.total = res.data.count
      })
    },
    cancel(vpid) {
      console.log(vpid)
      doThis.doGet("/VoluPeo/cancle", {vpid: vpid}).then(res => {
        if (res.code === "0") {
          // alert("取消成功")
            ElMessage({
              message: "取消成功",
              type: 'success',
            })
          this.getData()
        } else {
          // alert("取消失败，请稍后重试")
          ElMessage.error('取消失败，请稍后重试')
        }
      })
    },
    toDetail(vid) {
      this.$router.push("/front/volunteerDetail/" + vid)
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style>

</style>